<!DOCTYPE html>
<html  lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>JSON Data</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {

            $("#createButton").click(function() {
                $.ajax({
                    url: "/create",
                    type: "GET",
                    success: function(data) {
                        location.reload();
                        console.log("Create request successful");
                        // 在成功处理请求后执行其他操作
                    },
                    error: function(xhr, status, error) {
                        console.log("Error:", error);
                    }
                });
            });

            $("#scanButton").click(function() {
                $.ajax({
                    url: "/scan",
                    type: "GET",
                    success: function(data) {
                        location.reload();
                        console.log("Create request successful");
                        // 在成功处理请求后执行其他操作
                    },
                    error: function(xhr, status, error) {
                        console.log("Error:", error);
                    }
                });
            });

            $("#mineButton").click(function() {
                $.ajax({
                    url: "/mine",
                    type: "GET",
                    success: function(data) {
                        location.reload();
                        console.log("Create request successful");
                        // 在成功处理请求后执行其他操作
                    },
                    error: function(xhr, status, error) {
                        console.log("Error:", error);
                    }
                });
            });

            $.ajax({
                url: "/scan", // 替换为后端接口的URL
                type: "GET",
                dataType: "json",
                success: function(data) {
                    // 在成功获取数据后的回调函数中处理JSON数据
                    // 这里可以根据需要进行操作，例如渲染到表格中
                    var table = $("<table border='1'>");
                    var thead = $("<thead>");
                    var tbody = $("<tbody>");

                    // 创建表头行
                    var headers = Object.keys(data[0]);
                    var headerRow = $("<tr>");
                    headers.forEach(function(header) {
                        var th = $("<th>").text(header);
                        headerRow.append(th);
                    });
                    thead.append(headerRow);

                    // 创建数据行
                    data.forEach(function(item) {
                        var row = $("<tr>");
                        headers.forEach(function(header) {
                            var cell = $("<td>");
                            if (typeof item[header] === 'object') {
                                var nestedTable = $("<table border='1'>");
                                var nestedHeaders = Object.keys(item[header]);
                                var nestedHeaderRow = $("<tr>");
                                nestedHeaders.forEach(function(nestedHeader) {
                                    var nestedTh = $("<th>").text(nestedHeader);
                                    nestedHeaderRow.append(nestedTh);
                                });
                                var nestedTbody = $("<tbody>");
                                var nestedDataRow = $("<tr>");
                                nestedHeaders.forEach(function(nestedHeader) {
                                    var nestedCell = $("<td>");
                                    if (typeof item[header][nestedHeader] === 'object') {
                                        var nestedTable2 = $("<table>");
                                        var nestedHeaders2 = Object.keys(item[header][nestedHeader]);
                                        var nestedHeaderRow2 = $("<tr>");
                                        nestedHeaders2.forEach(function(nestedHeader2) {
                                            var nestedTh2 = $("<th>").text(nestedHeader2);
                                            nestedHeaderRow2.append(nestedTh2);
                                        });
                                        var nestedTbody2 = $("<tbody>");
                                        var nestedDataRow2 = $("<tr>");
                                        nestedHeaders2.forEach(function(nestedHeader2) {
                                            var nestedCell2 = $("<td>").text(item[header][nestedHeader][nestedHeader2]);
                                            nestedDataRow2.append(nestedCell2);
                                        });
                                        nestedTbody2.append(nestedDataRow2);
                                        nestedTable2.append(nestedHeaderRow2);
                                        nestedTable2.append(nestedTbody2);
                                        cell.append(nestedTable2);

                                    } else {
                                        nestedCell.text(item[header][nestedHeader]);
                                    }
                                    nestedDataRow.append(nestedCell);
                                });
                                nestedTbody.append(nestedDataRow);
                                nestedTable.append(nestedHeaderRow);
                                nestedTable.append(nestedTbody);
                                cell.append(nestedTable);

                            } else {
                                // 如果不是对象，则直接在表格单元格中显示值
                                cell.text(item[header]);
                            }
                            row.append(cell);
                        });
                        tbody.append(row);
                    });

                    table.append(thead);
                    table.append(tbody);

                    // 将表格添加到页面中
                    $("#jsonContainer").append(table);
                },
                error: function(xhr, status, error) {
                    console.log("Error:", error);
                }
            });
        });
    </script>
</head>
<body>
<h1>当前区块数据&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button id="scanButton">刷新区块数据</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button id="mineButton">挖矿</button></h1>
<div id="jsonContainer"></div>

<button id="createButton">产生创世区块</button>
</body>
</html>
